<template>
  <view class="team-container">
    <view class="team-header">
      <view class="stat-item">
        <text class="value">{{teamStats.total}}</text>
        <text class="label">会员总数</text>
      </view>
      <view class="stat-item">
        <text class="value">{{teamStats.direct}}</text>
        <text class="label">直接会员</text>
      </view>
      <view class="stat-item">
        <text class="value">{{teamStats.indirect}}</text>
        <text class="label">间接会员</text>
      </view>
    </view>
    
    <view class="team-tabs">
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'list'}"
        @click="activeTab = 'list'"
      >
        团队列表
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'income'}"
        @click="activeTab = 'income'"
      >
        收益明细
      </view>
      <view 
        class="tab-item" 
        :class="{active: activeTab === 'rank'}"
        @click="activeTab = 'rank'"
      >
        排位记录
      </view>
    </view>
    
    <view class="team-content">
      <view v-if="activeTab === 'list'">
        <view class="search-bar">
          <uni-search-bar placeholder="搜索会员姓名或手机号"></uni-search-bar>
        </view>
        <view class="team-list">
          <view class="team-item" v-for="(member, index) in teamList" :key="index">
            <image class="avatar" :src="member.avatar" />
            <view class="info">
              <text class="name">{{member.name}}</text>
              <text class="level">{{member.level}}</text>
              <text class="phone">{{member.phone}}</text>
            </view>
            <view class="type" :class="member.type">
              {{member.type === 'direct' ? '直接' : '间接'}}
            </view>
          </view>
        </view>
      </view>
      
      <view v-if="activeTab === 'income'" class="income-list">
        <!-- 收益明细内容 -->
      </view>
      
      <view v-if="activeTab === 'rank'" class="rank-list">
        <!-- 排位记录内容 -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('list')

const teamStats = ref({
  total: 56,
  direct: 12,
  indirect: 44
})

const teamList = ref([
  {
    avatar: '/static/avatar1.jpg',
    name: '李四',
    level: '白银会员',
    phone: '138****1234',
    type: 'direct'
  },
  // 更多团队成员...
])
</script>

<style lang="scss">
@import "@/uni.scss";
.team-container {
  padding: 20rpx;
  
  .team-header {
    display: flex;
    justify-content: space-around;
    background-color: $white-bg;;
    border-radius: 12rpx;
    padding: 30rpx 0;
    margin-bottom: 20rpx;
    
    .stat-item {
      text-align: center;
      
      .value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: $primary-color;
      }
      
      .label {
        font-size: 24rpx;
        color: $text-color-666;
      }
    }
  }
  
  .team-tabs {
    display: flex;
    background-color: $white-bg;;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      font-size: $font-size-28rpx;
      color: $text-color-666;
      
      &.active {
        color: $primary-color;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40%;
          height: 4rpx;
          background-color: $primary-color;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .team-content {
    background-color: $white-bg;;
    border-radius: 12rpx;
    padding: 20rpx;
    
    .search-bar {
      margin-bottom: 20rpx;
    }
    
    .team-list {
      .team-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f5f5f5;
        
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            display: block;
            font-size: $font-size-28rpx;
            margin-bottom: 6rpx;
          }
          
          .level, .phone {
            display: block;
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .type {
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          
          &.direct {
            background-color: #e6f7ff;
            color: $primary-color;
          }
          
          &.indirect {
            background-color: #f6ffed;
            color: #52c41a;
          }
        }
      }
    }
  }
}
</style>